<template>
  <div>
    <scroller style="margin-top: 1.1rem;">
      <div class="surveyDetail">
        <!-- 定义 -->
        <div class="definition">
          <div class="title">定义</div>
          <div class="content" v-html="pathDetail.pathDefine"></div>
        </div>
        <!-- 适合人群 -->
        <div v-show="pathDetail.suitCrowd" class="definition">
          <div class="title">适合人群</div>
          <div class="content" v-html="pathDetail.suitCrowd"></div>
        </div>
        <!-- 报考时间 -->
        <div v-show="pathDetail.testSchedule" class="definition">
          <div class="title">报考时间</div>
          <div class="content" v-html="pathDetail.testSchedule"></div>
        </div>
        <!-- 报考流程 -->
        <div v-show="pathDetail.process" class="definition">
          <div class="title">报考流程</div>
          <div class="content" v-html="pathDetail.process"></div>
        </div>
        <!-- 考试形式 -->
        <div v-show="pathDetail.testForm" class="definition">
          <div class="title">考试形式</div>
          <div class="content" v-html="pathDetail.testForm"></div>
        </div>
        <!-- 报考常识 -->
        <div v-show="pathDetail.commonSense" class="definition">
          <div class="title">报考常识</div>
          <div class="content" v-html="pathDetail.commonSense"></div>
        </div>
        <!-- 视频介绍 -->
        <div v-show="pathDetail.videoIntroduce !== ''" class="videoIntro">
          <div class="title">视频介绍</div>
          <div class="videoArea">
            <video id="v3" :src="pathDetail.videoIntroduce" style="width: 6.86rem; border-radius: 0.1rem; object-fit：fill; position: relative; top: 0; left: 0;" />
            <div class="controlBtn" @click="handlePlayVideo"><img v-show="!videoPlay" src="~/static/playBtn.png" alt="" /></div>
          </div>
        </div>
        <!-- 课程 -->
        <div v-show="courseInfoList.length > 0" class="course">
          <div class="title">课程</div>
          <div class="courseList">
            <div class="courseItem" v-for="(item, index) of courseInfoList" :key="index" @click="handleJumpIntoCourseDetail(item)">
              <div class="imageGroup">
                <img v-if="item.sign == '荐'" class="courseSign" src="~/static/lesson_icon_tuijian.png" alt="" />
                <img v-else-if="item.sign == '新'" class="courseSign" src="~/static/lesson_icon_xin.png" alt="" />
                <img v-else-if="item.sign == '热'" class="courseSign" src="~/static/lesson_icon_remen.png" alt="" />
                <img class="courseImg" :src="item.pic" alt="" />
                <img class="courseVIP" src="~/static/icon_vip.png" alt="" v-show="item.isVip == 1" />
              </div>
              <div class="courseTitle">{{ item.title }}</div>
              <div class="bottomArea">
                <div class="topicName">{{ item.topicName }}</div>
                <div class="isAD" v-show="item.isAd == 1">AD</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 人工服务热线 -->
        <div class="personService">
          <div class="topIntro">
            <div class="telephoneIcon"><img src="~/static/way_icon_zixunfuwu.png" alt="" /></div>
            <div class="rightIntro">
              <div class="title">升学规划1对1指导</div>
              <div class="time">工作日 9：00-17：30</div>
            </div>
          </div>
          <div class="serviceBtn" @click="appCallPhone">人工服务热线</div>
        </div>
      </div>
      <div style="width: 7.5rem;height: 3rem;"></div>
    </scroller>
    <div v-transfer-dom>
      <confirm v-model="showToast" @on-confirm="onConfirm">
        <p style="text-align:center;">该功能暂时仅限APP内使用，点击确定下载APP</p>
      </confirm>
    </div>
  </div>
</template>

<script>
import { queryPathSurveyById } from '~/api/identity'
import { Confirm, TransferDomDirective as TransferDom } from 'vux'

export default {
  name: 'survey',
  props: {
    conditionId: Number,
  },
  directives: {
    TransferDom,
  },
  components: {
    Confirm,
  },
  mounted() {
    this.getPathSurveyById()
  },
  data() {
    return {
      pathDetail: {},
      courseInfoList: [],
      videoPlay: false,
      showToast: false,
    }
  },
  methods: {
    handlePlayVideo() {
      if (!this.videoPlay) {
        v3.play()
        this.videoPlay = true
      } else {
        v3.pause()
        this.videoPlay = false
      }
    },
    // 通过id查询升学路径概况
    getPathSurveyById() {
      this.$loading('open')
      queryPathSurveyById(this.conditionId)
        .then((res) => {
          this.pathDetail = res.data
          this.courseInfoList = res.data.courseInfo
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    checkTerminal() {
      var u = navigator.userAgent
      var chrome = u.match(/Chrome\/([\d.]+)/) || u.match(/CriOS\/([\d.]+)/)
      var isWechat = u.toLowerCase().match(/MicroMessenger/i) == 'micromessenger' || u.match(/_SQ_/i) == '_sq_'
      var isAndroid = u.match(/(Android);?[\s\/]+([\d.]+)?/)
      var isiOS = !chrome && u.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/)
      if (isWechat) {
        return 'wechat'
      } else if (isiOS) {
        return 'ios'
      } else if (isAndroid) {
        return 'android'
      }
    },
    appCallPhone() {
      let telephone = '027-88161985'
      var terminal = this.checkTerminal()
      if (terminal === 'ios') {
        window.webkit.messageHandlers.CallTelephone.postMessage(telephone)
      } else if (terminal === 'android') {
        ZMParentsJsToAndroid.CallTelephone(telephone) //eslint-disable-line
      } else if (terminal === 'wechat') {
        window.location.href = 'tel://' + telephone
      } else {
        window.location.href = 'https://app.sx985.com/download'
      }
    },
    // 点击进入详情
    handleJumpIntoCourseDetail(item) {
      const data = {
        id: item.courseId,
        link: 'shengxue://lessonDetail?id=' + item.courseId,
        title: item.title,
        image: '',
        eventId: '',
      }
      if (this.checkTerminal() == 'ios') {
        window.webkit.messageHandlers.goCourseDetail.postMessage(data)
      } else if (this.checkTerminal() == 'android') {
        ZMParentsJsToAndroid.goCourseDetail(JSON.stringify(data))
      } else {
        this.showToast = true
      }
    },
    onConfirm() {
      window.location = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.sx985.am'
    },
  },
}
</script>

<style lang="less" scoped>
.surveyDetail {
  background: #fff;
  padding: 0.4rem 0.32rem 0.5rem;
  .definition {
    padding-bottom: 0.4rem;
    margin-top: 0.4rem;
    border-bottom: 1px solid #e5e8ed;
    .title {
      color: #222;
      font-size: 0.3rem;
      font-weight: bold;
      margin-bottom: 0.4rem;
    }
    .content {
      color: #222;
      font-size: 0.28rem;
      line-height: 0.4rem;
      overflow: hidden;
    }
  }
  .definition:first-child {
    margin-top: 0;
  }
  .videoIntro {
    margin-top: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e5e8ed;
    .title {
      color: #222;
      font-size: 0.3rem;
      font-weight: bold;
      margin-bottom: 0.2rem;
    }
    .videoArea {
      position: relative;
      .controlBtn {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        padding-top: 15%;
        img {
          width: 1.88rem;
          height: 1.88rem;
        }
      }
    }
  }
  .course {
    margin-top: 0.4rem;
    border-bottom: 1px solid #e5e8ed;
    .title {
      color: #222;
      font-size: 0.3rem;
      font-weight: bold;
      margin-bottom: 0.4rem;
    }
    .courseList {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .courseItem {
        margin-bottom: 0.4rem;
        .imageGroup {
          position: relative;
          width: 3.27rem;
          height: 2.46rem;
          margin-bottom: 0.16rem;
          .courseSign {
            width: 0.68rem;
            height: 0.68rem;
            position: absolute;
            left: 0;
            top: 0;
          }
          .courseImg {
            width: 100%;
            height: 100%;
            border-radius: 0.08rem;
          }
          .courseVIP {
            width: 0.7rem;
            height: 0.36rem;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
        .courseTitle {
          width: 3.27rem;
          height: 0.88rem;
          line-height: 0.44rem;
          color: #222;
          font-size: 0.28rem;
          font-weight: bold;
          margin-bottom: 0.16rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          -webkit-box-orient: vertical;
        }
        .bottomArea {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .topicName {
            color: #999;
            font-size: 0.22rem;
          }
          .isAD {
            color: #c7c7c7;
            background: #f7f7fa;
            font-size: 0.22rem;
            width: 0.62rem;
            height: 0.32rem;
            line-height: 0.32rem;
            border-radius: 0.16rem;
            text-align: center;
          }
        }
      }
    }
  }

  .personService {
    margin-top: 0.4rem;
    width: 100%;
    height: 3.02rem;
    box-shadow: 0 0 0.2rem 0 rgba(204, 204, 204, 0.3);
    border-radius: 0.1rem;
    padding: 0.4rem 0.32rem;
    .topIntro {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 0.28rem;
      margin-bottom: 0.32rem;
      .telephoneIcon {
        width: 1.02rem;
        height: 1.02rem;
        margin-right: 0.4rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .rightIntro {
        .title {
          color: #222;
          font-size: 0.3rem;
          font-weight: bold;
          margin-bottom: 0.27rem;
        }
        .time {
          color: #999;
          font-size: 0.24rem;
        }
      }
    }
    .serviceBtn {
      width: 100%;
      height: 0.88rem;
      line-height: 0.88rem;
      border-radius: 0.44rem;
      background: @mainColor;
      text-align: center;
      color: #fff;
      font-size: 0.3rem;
      font-weight: bold;
    }
  }
}
</style>
